<template>
  <!-- @scrolltolower：右边滚动条滚动到底部时触发 -->
  <scroll-view
    class="recommend_view"
    scroll-y=""
    @scrolltolower="handleToLower"
    v-if="recommends.length > 0"
  >
    <!-- 推荐开始 -->
    <view class="recommend_wrap">
      <navigator
        class="recommend_item"
        v-for="item in recommends"
        :key="item.id"
        :url="`/pages/album/index?id=${item.target}`"
      >
        <!-- 属性 mode="widthFix" 图片的高自适应屏幕 -->
        <image mode="widthFix" :src="item.thumb" />
      </navigator>
    </view>
    <!-- 推荐结束 -->
    <!-- 月份开始 -->
    <view class="month_wrap">
      <view class="month_title">
        <view class="month_title_info">
          <view class="month_info">
            <text v-text="months.DD"></text>
            / {{ months.MM }} 月
          </view>
          <view class="month_text" v-text="months.title"></view>
        </view>
        <view class="month_title_more">更多 >></view>
      </view>
      <view class="month_content">
        <view class="month_item" v-for="(item,index) in months.items" :key="item.id">
          <go-detail :list="months.items" :index="index">
            <image
            mode="aspectFill"
            :src="item.thumb + item.rule.replace('$<Height>', '360')"
          />
          </go-detail>
        </view>
      </view>
    </view>
    <!-- 月份结束 -->
    <!-- 热门开始 -->
    <view class="hot_wrap">
      <view class="hot_title">
        <text>热门</text>
      </view>
      <view class="hot_content">
        <view class="hot_item" v-for="(item,index) in hots" :key="item.id">
          <go-detail :list="hots" :index="index">
            <image :src="item.thumb" mode="widthFix" />
          </go-detail>
        </view>
      </view>
    </view>
    <!-- 热门结束 -->
  </scroll-view>
</template>

<script>
import moment from "moment";
import goDetail from "@/components/goDetail"
export default {
  data() {
    return {
      // 推荐列表
      recommends: [],
      // 月份
      months: {},
      // 热门
      hots: [],
      // 请求参数
      params: {
        limit: 30, // 要获取几条
        order: "hot", // 关键字
        skip: 0, // 跳过几条
      },
      // 是否还有下一页
      hasMore: true,
    };
  },
  /* 组件生命周期，监听组件挂载(挂载完成)，此处并不能监听子组件的挂载 */
  mounted() {
    this.getList();
  },
  methods: {
    /* 获取接口的数据 */
    getList() {
      this.request({
        url: "http://157.122.54.189:9088/image/v3/homepage/vertical",
        data: this.params,
      }).then((result) => {
        console.log(result);
        // 判断有没有下一页数据
        if (result.res.vertical.length === 0) {
          this.hasMore = false;
          uni.showToast({
            title: "标题",
            duration: 2000,
            icon: "none",
          });
          return;
        }
        if (this.recommends.length === 0) {
          // 第一次发送请求
          // 头部推荐模块
          this.recommends = result.res.homepage[1].items;
          // 月份模块
          this.months = result.res.homepage[2];
          // 将时间戳转义(使用 moment.js API处理)
          this.months.MM = moment(this.months.stime).format("MM");
          this.months.DD = moment(this.months.stime).format("DD");
          // console.log(this.months);
        }

        // 获取热门数据列表
        // 数组拼接(ES6语法)
        this.hots = [...this.hots, ...result.res.vertical];
      });
    },

    /* 滚动条触底事件 */
    handleToLower() {
      // console.log("右边滚动条触底了！！");
      /* 
      1、修改请求参数 skip += limit
      2、重新发送请求 getList()
      3、请求成功，hots 数据的叠加
       */
      if (this.hasMore) {
        this.params.skip += this.params.limit;
        this.getList();
      } else {
        // 已经没有数据了(弹窗提示用户)
        uni.showToast({
          title: "没有数据了哦",
          duration: 2000,
          icon: "none",
        });
      }
    },
  },
  /* 注册组件 */
    components: {
      goDetail
    },
};
</script>

<style lang="scss">
.recommend_view {
  height: calc(100vh - 36px); // 必须是屏幕的高度(100vh) - 头部标题的高度
}
.recommend_wrap {
  // flex 布局
  display: flex; // 伸缩
  flex-wrap: wrap; // 换行
  .recommend_item {
    width: 50%;
    border: 5rpx solid #fff; // 边框线
  }
}
.month_wrap {
  .month_title {
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
    .month_title_info {
      color: $color-text;
      font-size: 30rpx;
      font-weight: 600;
      display: flex;
      .month_info {
        text {
          font-size: 36rpx;
        }
      }

      .month_text {
        font-size: 34rpx;
        color: #666;
        padding-left: 30rpx;
      }
    }

    .month_title_more {
      font-weight: 600;
      color: $color-text;
      padding-top: 10rpx;
    }
  }

  .month_content {
    display: flex; // 伸缩
    flex-wrap: wrap; // 换行
    .month_item {
      width: 33.33%;
      border: 4rpx solid #fff;
    }
  }
}

.hot_wrap {
  .hot_title {
    padding: 20rpx;
    text {
      border-left: 10rpx solid $color-text; // 左边框
      padding-left: 20rpx;
      font-size: 34rpx;
      font-weight: 600;
    }
  }

  .hot_content {
    display: flex; // 伸缩
    flex-wrap: wrap; // 换行
    .hot_item {
      width: 33.33%;
      border: 5rpx solid #fff;
      image {
      }
    }
  }
}
</style>